<template>
	<view class="pageview">
		<cl-navbar autoBack  bgColor="transparent"></cl-navbar>
		<view class="pageContent">
			<cl-avatar
				:src="this.friendInfo.avatar_url"
				size="750rpx" shape='straight'></cl-avatar>
			<view class="centerTop" >
				<view class="centerTop__topview" style="">
					<cl-avatar
						:src="this.friendInfo.avatar_url" preview
						size="140rpx"></cl-avatar>
					<view class="centerTop__topview__info">
						<view style="display: flex;align-items: center;">
							<image src="/static/icon/nan.svg" style="width: 35rpx;height: 35rpx;margin-right: 10rpx;" v-if="friendInfo.sex == '男'"/>
							<image src="/static/icon/nv.svg" style="width: 35rpx;height: 35rpx;margin-right: 10rpx;" v-else-if="friendInfo.sex == '女'"/>
							<text class="centerTop__topview__info__nickname">{{friendInfo.nick_name}}</text>
							<text v-if="friendInfo.user_type && friendInfo.user_type > 0 && friendInfo.user_type != 6 && friendInfo.user_type != 8" class="typetag" style="background-color: #02D478;">{{$t('common.friend.authority')}}</text>
						</view>
						
						<view style="display: flex;align-items: center;margin-top: 10rpx;" @click.stop="copy">
							<text class="centerTop__topview__info__account" style="margin-top: 0;">{{$t('my.index.account')}}：{{friendInfo.user_no}}</text>
							<u-icon name="file-text" size="15px"></u-icon>
						</view>
					</view>
				</view>
				<view class="centerTop__signature u-line-3">
					{{$t("addressbook.friend_details.signature")}}：<span style="color: #ffffff;">{{friendInfo.sign_remark || $t("my.index.noSignature")}}</span> 
				</view>
			</view>
			
			<view class="bottombtn" @click="addFriend" > 
				{{$t('addfriendDetails.addFriend')}}
			</view>
		</view>
		<view>
			<cl-model ref="clMessage">
				<view class="yanzheng">
					<text>{{$t("addressbook.add_friend.friendVerification")}}</text>
					<view class="messageView" >
						<u-textarea v-model="message" autoHeight :placeholder="$t('addfriendDetails.appInstructions')" border="none" placeholderStyle="color:#595A66" :customStyle="{backgroundColor:'#343545',borderRadius: '20rpx'}" :adjustPosition="false"></u-textarea>
					</view>
				</view>
			</cl-model>
		</view>
	</view>
</template>

<script>
	import sqliteFriend from '@/sqlite_services/friend.js'
	import friendsApi from "@/services/api/friends.js"
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'addfriendDetails',
		data() {
			return {
				friendInfo:{
					user_id: 0,
					user_no: 0,
					nick_name: "",
					avatar_url: "",
					user_type: 0,
					sex:'',
					is_friend: 0
				},
				message:'',
			}
		},
		computed: {
			...mapState({
				user_info: state => state.user.user_info,
			})
		},
		onLoad() {
			let {user_id,user_no,nick_name,avatar_url,user_type,sex,is_friend,sign_remark} = this.$Route.query
			this.friendInfo = {user_id,user_no,nick_name,avatar_url,user_type,sex,is_friend,sign_remark}
			this.message = this.$t("addfriendDetails.Im") + this.user_info.nick_name
		},
		methods: {
			copy(){
				uni.setClipboardData({
					data: this.friendInfo.user_no,
					showToast:false,
					success: () => {
						uni.showToast({
							icon:'none',
							title:this.$t("tost.title.copyOk")
						})
					}
				});
			},
			//添加好友
			async addFriend(){
				this.$refs.clMessage.show({
					confirmText: this.$t("common.sendConfirm"),
					cancelText: this.$t("common.cancelText"),
					confirm: async(e) => {
						try{
							let res = await this.$api.friends.apply({
								recipient_id:this.friendInfo.user_id,
								message:this.message
							})
							if(res){
								uni.showToast({
									title:this.$t("tost.title.applyOk"),
									icon:'none'
								})
								e.showModel = false
								setTimeout(()=>{
									uni.navigateBack({
									  delta: 1,  // 返回的页面数，1 表示返回到上一个页面
									});
								},1000)
							}
							e.showModel = false
						}catch(e){}
					},
					close: () => {}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.typetag{
		white-space: nowrap;
		font-size: 20rpx;
		color: #FFFFFF;
		padding: 0 10rpx;
		height: 28rpx;
		margin-left: 10rpx;
		line-height: 28rpx;
		text-align: center;
		border-radius: 10rpx;
		background-color: #FF7676;
	}
	.bottombtn{
		position: fixed;
		width: 342rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
		background: linear-gradient( 270deg, #FF7B3C 0%, #FF5B7C 100%);
		border-radius: 40rpx;
		left: 204rpx;
		bottom: 100rpx;
	}
	.centerTop {
		padding:  1rpx 30rpx;
		position: relative;
		box-sizing: border-box;
		margin-top: -35rpx;
		border-radius: 30rpx;
		background-color: #121325;
	
		&__topview {
			display: flex;
			align-items: center;
			margin-top: -35rpx;
			&__info {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;
				margin-top: 35rpx;
				&__nickname {
					font-size: 32rpx;
					color: #FFFFFF;
				}
	
				&__account {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #61626E;
				}
			}
		}
	
		&__signature {
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #61626E;
		}
	
		&__positionview {
			position: absolute;
			right: 40rpx;
			top: 70rpx;
			z-index: -1;
	
			&__img {
				width: 320rpx;
				height: 320rpx;
			}
		}
	}
	.yanzheng{
		display: flex;
		flex-direction: column;
		width: 100%;
		.messageView {
			margin-top: 35rpx;
			width: 100%;
			text-align: left;
		}
	}
</style>